<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色管理</title>
		<link rel="stylesheet" href="../../component/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<table class="layui-hide" id="role-list-id" lay-filter="role-list-filter"></table>
		</div>
		<script src="../../component/layui/layui.js"></script>
		<script src="../../component/pear/pear.js"></script>
		<script>
			layui.use(function(){

				let table = layui.table;
				let layer = layui.layer;
				let $ = layui.$;

				table.on('toolbar(role-list-filter)', function(obj){
					let event = obj.event;
					if(event==='add'){
						layer.open({
							type: 2,
							title: '添加角色',
							area: ['400px', '270px'],
							content: './role-add.html',
							skin: 'layui-layer-molv',							
							end: function(){
								table.reload('role-list-id');
							}
						});
					}
				});

				table.on('tool(role-list-filter)', function(obj){
					let event = obj.event;
					if(event==='edit'){
						layer.open({
							type: 2,
							title: '编辑角色',
							area: ['400px', '270px'],
							content: './role-edit.html',
							skin: 'layui-layer-molv',
							success: function(layero, index, that){
								let iframeWindow = window[layero.find('iframe')[0].name];
								iframeWindow.postMessage(obj.data);
							},
							end: function(){
								table.reload('role-list-id');
							}
						});
					}else if(event==='delete'){
						layer.confirm('确认删除这条数据吗？', {btn: ['确认', '取消']}, function(index){
							$.getJSON('http://127.0.0.1:8080/deleteRole', {roleId:obj.data.roleId}, function(res){
								if(res.code==0){									
									table.reload('role-list-id');
								}else{
									layer.msg(res.msg);
								}
								layer.close(index);
							});
						})
					}else if(event==='auth'){
						layer.open({
							type: 2,
							title: '授权',
							area: ['400px', '440px'],
							content: './role-auth.html?roleId='+obj.data.roleId,
							skin: 'layui-layer-molv'
						});
					}
				});

				table.render({
					elem: '#role-list-id',
					url: 'http://127.0.0.1:8080/getRoleList',
					page: {
						prev: '上一页',
						next: '下一页'
					},
					request: {
						pageName: 'pageNo',
						limitName: 'pageSize'
					},
					parseData: function(res){
						return {
							'code': res.code,
							'msg': res.msg,
							'count': res.data.total,
							'data': res.data.page
						};
					},
					toolbar: `
						<div>
							<button type="button" class="layui-btn layui-btn-sm" lay-event="add">添加角色</button>
						</div>
					`,
					cols: [[
						{
							title: '角色id',
							field: 'roleId'
						},
						{
							title: '角色名',
							field: 'roleName'
						},
						{
							title: '状态',
							templet: function(d){
								return d.status==1?'<span class="layui-badge layui-bg-green">可用</span>':'<span class="layui-badge">不可用</span>';
							}
						},
						{
							title: '操作',
							fixed: 'right',
							width: '300',
							align: 'center',
							templet: function(){
								let s = '<button type="button" class="layui-btn layui-bg-red layui-btn-xs" lay-event="delete">删除</button>';
								s+='<button type="button" class="layui-btn layui-btn-xs" lay-event="edit">编辑</button>';
								s +='<button type="button" class="layui-btn layui-bg-orange layui-btn-xs" lay-event="auth">授权</button>';
								return s;
							}
						}
					]]

				});

			});
		</script>
	</body>
</html>
